<div class="row">
    <div class="col-md-8">
        <p>jsTree是jquery插件，提供<strong>交互式</strong>树。 它完全<strong>免费</strong>，
            <a href="https://github.com/vakata/jstree/">开源</a>并在<a
                    href="https://raw.githubusercontent.com/vakata/jstree/master/LICENSE-MIT">MIT许可</a>下分发。
            jsTree易于扩展，可扩展，可配置，
            支持HTML和JSON数据源以及AJAX加载。</p>

        <p>jsTree在箱型（内容盒或边框）中正常运行，可作为AMD模块加载，并具有内置的移动主题，可进行响应式设计，
            可轻松定制。 它使用jQuery的事件系统，因此对树中各种事件的绑定回调很熟悉且容易。</p>
        <p>一些值得注意的功能:</p>
        <ul class="features list-unstyled list-inline">
            <li><i class="glyphicon glyphicon-ok"></i> 支持拖放</li>
            <li><i class="glyphicon glyphicon-ok"></i> 键盘导航</li>
            <li><i class="glyphicon glyphicon-ok"></i> 内联编辑，创建和删除</li>
            <li><i class="glyphicon glyphicon-ok"></i> 三态复选框</li>
            <li><i class="glyphicon glyphicon-ok"></i> 模糊搜索</li>
            <li><i class="glyphicon glyphicon-ok"></i> 可自定义的节点类型</li>
        </ul>
        <p id="main-buttons">
            <img src="//static.jstree.com/3.3.8/assets/images/browsers.png"
                 style="max-width:100%; max-height:36px;" alt=""/><br/>
            <small>Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+<br/><em style="color:silver;">older
                versions may work, but are not tested</em></small>
            <br/><br/>
            <a href="https://github.com/vakata/jstree/zipball/3.3.8" class="btn btn-success"><i
                    class="glyphicon glyphicon-download"></i>&nbsp;&nbsp;Download</a>
            <a href="https://groups.google.com/forum/#!forum/jstree" class="btn btn-warning"><i
                    class="glyphicon glyphicon-comment"></i>&nbsp;&nbsp;Discuss</a>
            <a href="https://github.com/vakata/jstree/issues?state=open" class="btn btn-danger"><i
                    class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;&nbsp;Report bugs</a>
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=paypal@vakata.com&amp;currency_code=USD&amp;amount=&amp;return=//jstree.com/donation&amp;item_name=Buy+me+a+coffee+for+jsTree"
               class="btn btn-primary"><i class="glyphicon glyphicon-thumbs-up"></i>&nbsp;&nbsp;&nbsp;Donate</a>
        </p>
    </div>
    <div class="col-md-4">
        <div id="jstree1" class="demo">
            <ul>
                <li>Root node 1
                    <ul>
                        <li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a>
                        </li>
                        <li data-jstree='{ "icon" : "//jstree.com/tree-icon.png" }'>custom icon URL</li>
                        <li data-jstree='{ "opened" : true }'>initially open
                            <ul>
                                <li>Another node</li>
                            </ul>
                        </li>
                        <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class
                            (bootstrap)
                        </li>
                    </ul>
                </li>
                <li><a href="//www.jstree.com">Root node 2</a></li>
            </ul>
        </div>
        <div id="jstree2" class="demo" style="margin-top:2em;"></div>
        <script>
            $(function () {
                $('#jstree1').jstree();
                $('#jstree2').jstree({
                    'plugins': ["wholerow", "checkbox"], 'core': {
                        'data': [
                            {
                                "text": "Same but with checkboxes",
                                "children": [
                                    {"text": "initially selected", "state": {"selected": true}},
                                    {"text": "custom icon URL", "icon": "//jstree.com/tree-icon.png"},
                                    {
                                        "text": "initially open",
                                        "state": {"opened": true},
                                        "children": ["Another node"]
                                    },
                                    {"text": "custom icon class", "icon": "glyphicon glyphicon-leaf"}
                                ]
                            },
                            "And wholerow selection"
                        ]
                    }
                });
            });
        </script>
    </div>
</div>